import React, { useState, useEffect } from 'react';
import { Tabs, Row, Col, Tag, Spin, Button } from 'antd';
import { eventTrack } from '@/utils/track';
import { history } from 'umi';
import { displayAllPersonalMenu, submitSelectedPersonalMenu, getMyFrequentMenu } from '@/services/notice/homePage';
import { findCodeFn } from '@/pages/Notice/HomePage/utils';
import styles from './index.less';
import QuickCheck from '../common/QuickCheck';
import { SettingBar } from '../common/TabBarExtraContent';
import homepageStyles from '../../homepage.less';

const { TabPane } = Tabs;
/**
 * 快捷功能
 */
const Kjgn = props => {
    const { responders } = props;
    const { onDelete, droppableProps, onAdd } = responders;
    const [visible, setVisible] = useState(false);
    const [kjgnData, setKjgnData] = useState([]);
    const [spinning, setSpinning] = useState(false);
    // 通过所在列计算
    const grid = droppableProps['data-rbd-droppable-id'] === 'droppable' ? 4 : 8;
    const init = async () => {
        setSpinning(true);
        const res = await getMyFrequentMenu();
        setSpinning(false);
        if (res && res.code === 10000) {
            setKjgnData(res.data);
        }
    };
    const onOk = () => {
        setVisible(false);
        init();
    };
    const AddButton = () => (
        <div style={{ textAlign: 'center' }}>
            <Button type="primary" icon="plus" onClick={() => setVisible(true)}>
                马上添加快捷功能入口
            </Button>
        </div>
    );
    const linkToItem = e => {
        const { path = '' } = findCodeFn(e);
        history.push({
            pathname: path,
            query: {}
        });
    };
    useEffect(() => {
        init();
    }, []);
    return (
        <Spin spinning={spinning}>
            <Tabs
                defaultActiveKey="1"
                className={homepageStyles.wnWdlcTitle}
                tabBarExtraContent={
                    <SettingBar
                        onDelete={onDelete}
                        setVisible={setVisible}
                        onAdd={onAdd}
                        onClick={() => {
                            eventTrack({
                                eventName: 'portal_shortcut_set_click',
                                pageName: 'personal_portal'
                            });
                        }}
                    />
                }
            >
                <TabPane tab="快捷功能" key="1">
                    <Row gutter={15}>
                        {kjgnData.length === 0 ? (
                            <AddButton />
                        ) : (
                            kjgnData.map(item => (
                                <Col key={item.id} span={grid}>
                                    <div
                                        className={styles.flex_tag}
                                        title={item.templateName}
                                        onClick={() => {
                                            // 埋点
                                            eventTrack({
                                                eventName: 'portal_shortcut_click',
                                                pageName: 'personal_portal',
                                                eventProps: {
                                                    click_context: item.name
                                                }
                                            });
                                            linkToItem(item.code);
                                        }}
                                    >
                                        <Tag title={item.name}>{item.name}</Tag>
                                    </div>
                                </Col>
                            ))
                        )}
                    </Row>

                    <QuickCheck
                        modalProps={{
                            title: '添加快捷功能',
                            visible,
                            onOk,
                            onCancel: () => setVisible(false)
                        }}
                        getData={params => displayAllPersonalMenu(params)}
                        submitData={params => submitSelectedPersonalMenu(params)}
                        fileName={{
                            label: 'menuName',
                            value: 'menuId',
                            defaultValue: 'selfEmployeeMenuId',
                            submitParam: 'menuIdList'
                        }}
                        declare="请选择需要添加到快捷功能的功能："
                    />
                </TabPane>
            </Tabs>
        </Spin>
    );
};
export default Kjgn;
